<template>
    <div class="contaion">
        <div class="contaion-inner">
            <!-- 生成的标签 -->
            <el-tag v-for="tag in selected" closable :disable-transitions="true" :key="tag" type="info" @close="handleClose(tag)">
                <span class="el-select__tags-text">{{ tag }}</span>
            </el-tag>
            <el-autocomplete id="phoneNumberInput" type="textarea" maxlength="20" v-if="this.selected.length == 0" class="inline-input" v-model="cSubcategoryNo" :fetch-suggestions="querySearch" :placeholder="$t('sms.inputTips')" @select="handleSelect" v-enter-prevent></el-autocomplete>
        </div>
    </div>
</template>

<script>
import he from 'he';
import { isValidSMSPhone } from '@/utils/sms';
import { debounce } from 'lodash-es';

export default {
    name: 'SelectChecked',
    components: {},
    data() {
        return {
            restaurants: [],
            cSubcategoryNo: '',
            selected: [], // 获得value值
            selectedValue: [], //获得code值
            Device_list: [],
            tableData: {},
            emitFlag: false
        };
    },
    methods: {
        //回车增加tag
        addTags() {
            // 匹配 \r\n、\r 或 \n
            const newLineRegex = /(\r\n|\r|\n)$/;

            if (newLineRegex.test(this.cSubcategoryNo)) {
                this.cSubcategoryNo = this.cSubcategoryNo.replace(newLineRegex, '');
            }

            //新增函数中可以加一些你所需要的校验规则。比如只能是数子，或者不能输入‘，’等
            if (isValidSMSPhone(this.cSubcategoryNo)) {
                if (this.selected.length >= 1) {
                    this.$message.error('最多选择一位联系人');
                } else {
                    this.selected.push(this.cSubcategoryNo);
                    this.selectedValue.push(this.cSubcategoryNo);
                    this.emitFlag = true;
                    this.$emit('getNumber', this.cSubcategoryNo);
                    this.cSubcategoryNo = '';
                }
                this.Device_list = this.$store.state.Device_message_list;
                for (let i = 0; i <= this.Device_list.length; i++) {
                    if (this.Device_list[i]) {
                        if (this.Device_list[i].number == this.selectedValue) {
                            this.$store.state.message_list = this.Device_list[i].data;
                            this.$parent.getMessagShow();
                            break;
                        }
                    }
                }
            } else {
                this.$message.error(this.$t('sms.invalidPhone'));
            }
        },
        querySearch(queryString, cb) {
            let restaurants = this.restaurants;
            let results = queryString ? restaurants.filter((e) => e.value.toUpperCase().includes(queryString.toUpperCase())) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        loadAll() {
            let phonebook_list = this.$store.state.phonebook_list;
            let phonebook_list_show = [];
            for (var i = 0; i < phonebook_list.length; i++) {
                let arr = {
                    value: phonebook_list[i].name === phonebook_list[i].mobilePhone ? phonebook_list[i].mobilePhone : he.decode(phonebook_list[i].name) + '/' + phonebook_list[i].mobilePhone,
                    name: he.decode(phonebook_list[i].name),
                    number: phonebook_list[i].mobilePhone
                };
                phonebook_list_show.push(arr);
            }
            return phonebook_list_show;
        },
        //多选栏中的删除
        handleClose(tag) {
            let item = this.selected.indexOf(tag);
            this.selected.splice(item, 1);
            this.selectedValue.splice(item, 1);
            this.$store.state.message_list = [];
            this.emitFlag = false;
            this.$emit('getNumber', this.selectedValue);
            this.$parent.getMessagShow();
        },
        //值
        handleSelect(item) {
            if (this.selected.length >= 1) {
                this.$message.error('最多选择一位联系人');
            } else {
                this.selected.push(item.value);
                this.selectedValue.push(item.value);
                this.emitFlag = true;
                this.cSubcategoryNo = '';
            }

            this.$emit('getNumber', item.number);
        },
        getData() {
            this.restaurants = this.loadAll();
            // 根据路由参数获取当前是否显示默认值
            const mobilePhone = this.$route.query.mobilePhone;
            if (Array.isArray(this.restaurants) && this.restaurants.length > 0 && mobilePhone) {
                const currentSelect = this.restaurants.filter((item) => item.number == mobilePhone);
                if (currentSelect) {
                    this.selected = [currentSelect[0].value];
                    this.selectedValue = [currentSelect[0].number];
                    this.emitFlag = true;
                    this.$emit('getNumber', this.selectedValue);
                }
            }
        },
        init() {
            this.restaurants = [];
            this.cSubcategoryNo = '';
            this.selected = [];
            this.selectedValue = [];
            this.Device_list = [];
            this.tableData = {};
            this.emitFlag = false;
            this.getData();
        }
    },
    mounted() {
        this.getData();
    },
    watch: {
        cSubcategoryNo: debounce(function (newVal, oldVal) {
            if (newVal != oldVal && !this.emitFlag) {
                this.$emit('getNumber', newVal);
            }
        }, 500)
    },
    directives: {
        'enter-prevent': {
            inserted(el, binding, vnode) {
                const vm = vnode.context; // 获取组件实例
                el.addEventListener('keydown', (event) => {
                    if (event.keyCode === 13) {
                        event.preventDefault();
                        vm.addTags();
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.contaion {
    width: 100%;
    box-sizing: border-box;
    background-color: #d4dae2;
    //border: 1px solid #d4dae2;
    border-radius: 4px;
    font-size: 12px;
    text-align: left;
    padding: 10px 8px;
    word-wrap: break-word;
    overflow: hidden;
}

.contaion-inner {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 12px;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
}

/* 标签 */
.spanbox {
    display: inline-block;
    font-size: 14px;
    margin: 3px 4px 3px 0;
    background-color: #ecf5ff;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin: 2px;
}

/* 标签文字 */
.tagspan {
    height: 24px;
    line-height: 22px;
    max-width: 99%;
    position: relative;
    display: inline-block;
    padding-left: 8px;
    color: #409eff;
    font-size: 14px;
    opacity: 1;
    vertical-align: middle;
    overflow: hidden;
    transition: 0.25s linear;
}

/* tag的叉叉 */
.iClose {
    content: '\00D7';
    padding: 0 6px 0 4px;
    opacity: 1;
    -webkit-filter: none;
    filter: none;
    color: #409eff;
    /* font-weight: 600; */
    cursor: pointer;
}

/* 鼠标经过叉叉 */
.iClose:hover {
    background-color: #409eff;
    border-radius: 50%;
    color: #fff;
}

.iClose:after {
    content: '\00D7';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* line-height: 27px; */
    transition: 0.3s, color 0s;
}

/* input */
.inputTag {
    font-size: 16px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    width: auto;
    min-width: 150px;
    vertical-align: top;
    height: 32px;
    color: #495060;
    line-height: 32px;
}

/deep/.el-textarea {
    textarea {
        resize: none;
        height: 48px;
        line-height: 36px;
        &:focus {
            border-color: transparent;
        }
    }

    @media (max-width: 580px) {
        textarea {
            resize: none;
            height: 54px;
            font-size: 14px;
            line-height: normal;
        }
    }
}

/deep/ .el-input__inner {
    border: 0px solid #fff;
}

/deep/ .el-tag {
    margin: 3px;
}
</style>
